<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <title>jbgallery 3.0 demo - debug - jbox test</title>
    <meta name="author" content="Massimiliano Balestrieri" />
    <link href="../../jbgallery-3.0.css" rel="stylesheet" media="screen" />
    <script src="../../libs/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="../../jbgallery-3.0.js" type="text/javascript"></script>
	<!-- only for test -->
    <script src="../../libs/test/jquery.cookie.js" type="text/javascript"></script>
    <script src="../../libs/test/jquery-ui-1.8.7.custom.min.js" type="text/javascript"></script>
    <style type="text/css">
        .ui-icon-gripsmall-diagonal-se{position:absolute;bottom:1px;right:1px;height:12px;width: 12px;background:red;z-index:2000;}
    </style>
    <!-- /test -->
	<script type="text/javascript"><!--
   	jQuery(document).ready(function(){
		var _h = $.cookie('h') || 300;//only for test
        var _w = $.cookie('w') || 800;//only for test
        var _o = {fullscreen: false, menu : "slider", style : "zoom"}; 
        var obj = jQuery("#test");
        
        jQuery("#mm-zoom").click(function(){
            _o.style = 'zoom';
			_init(_o);
        }); 
        jQuery("#mm-centered").click(function(){
            _o.style = 'centered';
			_init(_o);
        });
        jQuery("#mm-original").click(function(){
            _o.style = 'original';
            _init(_o);
        });
        jQuery("#mm-slider").click(function(){
            _o.menu = 'slider';
            _init(_o);
        }); 
        jQuery("#mm-simple").click(function(){
            _o.menu = 'simple';
            _init(_o);
        });
        jQuery("#mm-numbers").click(function(){
            _o.menu = 'numbers';
            _init(_o);
        });
        jQuery("#mm-nomenu").click(function(){
            _o.menu = false;
            _init(_o);
        });
                
        jQuery(".cmd").each(function(nr){
			jQuery(this).click(function(){
	            obj.jbgallery("go", (nr + 1));
			});
        }); 
       
        function _init(opt){
			obj.jbgallery("destroy");
			obj.resizable("destroy");
            
			obj
			.css({
                width: _w,
                height : _h
            })
			.jbgallery(opt)
			.resizable({
	            stop: function(){
	               _h = $.cookie('h', $(this).height());
                   _w = $.cookie('w', $(this).width());
				   location.reload();
	            }
	        });
        }
        _init(_o);
       
	});
	--></script>
	 <style type="text/css">
     /* z-index 1001 => jbg-content z-index 1000;*/
    #mymenu{z-index:1001;position:absolute;position:fixed;left:0px;bottom:0px;padding:3px;background:#000;width:100%;}
    #mymenu a{color:#000;text-decoration:none;font-size:11px;margin:5px;border:1px solid black;padding:2px;background:#fff;}
	</style>
    </head>    
<body>
<div id="mymenu">
	<a href="#" id="mm-1000x749" class="cmd">1000x700</a><!-- minore BODY quadrata -->
    <a href="#" id="mm-1000x749" class="cmd">1000x700*</a><!-- BUG this.complete chrome -->
    <a href="#" id="mm-3000x2000" class="cmd">3000x2000</a><!-- maggiore BODY lanscape -->
	<a href="#" id="mm-2000x3000" class="cmd">2000x3000</a><!-- maggiore BODY portrait -->
	<a href="#" id="mm-3000x3000" class="cmd">3000x3000</a><!-- quadrata maggiore BODY -->
	<a href="#" id="mm-2000x200" class="cmd">2000x200</a><!-- 1 maggiore BODY landscape -->
	<a href="#" id="mm-200x2000" class="cmd">200x2000</a><!-- 1 maggiore BODY portrait -->
	<a href="#" id="mm-300x200" class="cmd">300x200</a><!-- minore BODY lanscape -->
	<a href="#" id="mm-200x300" class="cmd">200x300</a><!-- minore BODY portrait -->
	<a href="#" id="mm-200x200" class="cmd">200x200</a><!-- minore BODY quadrata -->
	<a href="#" id="mm-1x1" class="cmd">1x1</a><!-- 1x1 -->
    <a href="#" id="mm-centered">CENTERED</a>
    <a href="#" id="mm-original">ORIGINAL</a>
    <a href="#" id="mm-zoom">ZOOM</a>
	<a href="#" id="mm-slider">SLIDER</a>
	<a href="#" id="mm-simple">SIMPLE</a>
	<a href="#" id="mm-numbers">NUMBERS</a>
	<a href="#" id="mm-nomenu">NOMENU</a>
</div>
<div class="jbgallery" id="test">
	<ul>
		<li><a title="1000x769" href="http://lh5.ggpht.com/_JJJpzXdPAI4/TQtnmWII_wI/AAAAAAAABaQ/Gemk2bH539A/d/test-1000x749.jpg"></a></li>
        <!-- BUG this.complete chrome -->
		<li><a title="1000x769" href="http://lh5.ggpht.com/_JJJpzXdPAI4/TQtnmWII_wI/AAAAAAAABaQ/Gemk2bH539A/d/test-1000x749.jpg"></a></li>
        <li><a title="3000x2000" href="http://lh3.ggpht.com/_JJJpzXdPAI4/TQtnm9j0rBI/AAAAAAAABag/y_OSyw3xU8c/d/test-3000x2000.jpg"></a></li>
		<li><a title="2000x3000" href="http://lh5.ggpht.com/_JJJpzXdPAI4/TQtnmtVzOeI/AAAAAAAABac/RPFdDLFmnvo/d/test-2000x3000.jpg"></a></li>
		<li><a title="3000x3000" href="http://lh3.ggpht.com/_JJJpzXdPAI4/TQtnqwLok0I/AAAAAAAABak/Qnpyb_afUf0/d/test-3000x3000.jpg"></a></li>
		<li><a title="2000x200" href="http://lh6.ggpht.com/_JJJpzXdPAI4/TQtnmZOpXfI/AAAAAAAABaU/8NxTL7p3VYE/d/test-2000x200.jpg"></a></li>
		<li><a title="200x2000" href="http://lh6.ggpht.com/_JJJpzXdPAI4/TQtndIg-TeI/AAAAAAAABaI/JRhhMTO4dzw/d/test-200x2000.jpg"></a></li>
		<li><a title="300x200" href="http://lh5.ggpht.com/_JJJpzXdPAI4/TQtndB11d8I/AAAAAAAABaM/4oKpCu-4xgo/d/test-300x200.jpg"></a></li>
		<li><a title="200x300" href="http://lh6.ggpht.com/_JJJpzXdPAI4/TQtndKJSTAI/AAAAAAAABaE/5bqlbxZrhr0/d/test-200x300.jpg"></a></li>
		<li><a title="200x200" href="http://lh6.ggpht.com/_JJJpzXdPAI4/TQtndKJSTAI/AAAAAAAABaE/5bqlbxZrhr0/d/test-200x200.jpg"></a></li>
		<li><a title="1x1" href="http://lh5.ggpht.com/_JJJpzXdPAI4/TQtnczX2sYI/AAAAAAAABZ8/x9w4pAbhUVI/d/test-1x1.jpg"></a></li>
	</ul>










</div>
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-258871-1']);
  _gaq.push(['_setDomainName','.maxb.net']); 
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
</body>
</html>